<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花坊OA系统</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            padding-top: 16px;
        }
    </style>
</head>

<body>

    <div class="container">

        
        <div class="panel panel-default">
            <div class="panel-body">
              
            </div>

            
            <div action="" method="POST" role="form">
                <legend>登录页面</legend>
            
                <div class="form-group">
                    <input type="text" class="form-control" id="id" placeholder="请输入用户名">
                    <input type="text" class="form-control" id="password" placeholder="请输入密码">
                </div>
            
                
            
                <button  class="btn btn-primary" onclick="submitEvt()">登录</button>
            </div>
            
        </div>
        


               
            </div>
       


    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script>
        function submitEvt() {
            var obj = {
                id: id.value, //这句话是什么意思  id 唯一标识  可以直接点 value
                password: CryptoJS.MD5(password.value).toString //实行加密
            }
            console.log(obj)
            location.href = './user/list.html'
        }



        function loginEvt() {
            // 先实例化一个XHR对象
            var xhr = new XMLHttpRequest()

            // 先打开连接 -- 页面上的id属性必须唯一，因为id可以直接做一个dom变量使用
            xhr.open('GET', `/user/login?id=${id.value}    
                             &password=${password.value}`)

            // 设置请求头 -- 设置传递数据类型->json
            xhr.setRequestHeader('Content-Type', 'application/json')

            // 监听请求响应
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    // status 是xhr请求的状态码
                    if (this.status === 200) {
                        // debugger 是一个非常有用的前端调试命令
                        var data = JSON.parse(this.responseText)
                        if (data.code === 200) {
                            alert('登录成功')
                            sessionStorage.setItem('flag', 'flag')
                            location.href = './index.html'
                        } else {
                            alert(data.message)
                        }
                    } else {
                        console.log(this.status, this.statusText)
                    }
                }
            }

            // 发送请求和请求数据
            xhr.send()
        }
    </script>

</body>

</html>